<template>
  <div class="mod-login">
    <div class="msk"></div>
    <div class="mod-login-show" id="loginShow">
      <h4 class="mod-login-hd" @mousedown="moveA">
        登录
        <span class="close" @click="closeLogin">
          <i class="iconfont">&#xec47;</i>
          关闭
        </span>
      </h4>
      <div class="mod-login-bd">
        <div class="login-code" v-if="loginMethod == 0">
          <div class="code-l">
            <img :src="scan" alt="" />
          </div>
          <div class="code-r">
            <h4>扫码登录</h4>
            <div class="code-detail">
              <img :src="qrCode" alt="" />
              <div class="code-status" v-if="codeCode === 800">
                <p>二维码已失效</p>
                <el-button
                  class="btn-ref"
                  type="success"
                  size="mini"
                  @click="login"
                >
                  点击刷新
                </el-button>
              </div>
              <div class="code-status" v-else-if="codeCode === 802">
                <p>待确认</p>
              </div>
            </div>
            <p class="scan-tip">使用<em> 网易云音乐APP </em>扫码登录</p>
          </div>
          <div class="code-order">选择其他登录方式</div>
        </div>
        <div class="login-phone" v-if="loginMethod == 1">手机号</div>
        <div class="login-email" v-if="loginMethod == 2">邮箱</div>
      </div>
    </div>
  </div>
</template>

<script>
import scan from "assets/images/scan.png";
import qrCode from "assets/images/qrCode.png";

export default {
  data() {
    return {
      loginMethod: 0,
      scan: scan,
      qrCode: qrCode,
      // 登录状态
      status: "",
      // 扫码状态
      codeStatus: "",
      // 二维码状态
      codeCode: 801,
      timer: null,
    };
  },
  mounted() {
    this.getLoginStatus();
    this.login();
  },
  methods: {
    moveA(e) {
      let el = document.getElementById("loginShow");
      e = e || window.event;
      // 鼠标到myAdd的距离
      var disX = e.clientX - el.offsetLeft;
      var disY = e.clientY - el.offsetTop;
      document.onmousemove = function (e) {
        var l = e.clientX - disX;
        var t = e.clientY - disY;
        if (l <= 250) {
          el.style.left = "250px";
        } else if (l + 250 >= document.body.clientWidth) {
          el.style.left =
            document.body.clientWidth - 8 - el.offsetWidth / 2 + "px";
        } else {
          el.style.left = l + "px";
        }
        console.log(t);
        if (t <= 180) {
          el.style.top = "180px";
        } else if (t + 165 >= document.body.clientHeight) {
          el.style.top = document.body.clientHeight - el.offsetTop - +"px";
        } else {
          el.style.top = t + "px";
        }
      };
      document.onmouseup = function () {
        document.onmousemove = document.onmouseup = null;
      };
    },
    async checkStatus(key) {
      // 检测扫码状态
      const res = await this.axios({
        url: "/login/qr/check?key=" + key + "&timerstamp=" + Date.now(),
      });
      this.codeCode = res.data.code;
      return res.data;
    },
    async getLoginStatus() {
      // 获取登录状态
      await this.axios({
        url: "/login/status?timerstamp=" + Date.now(),
      })
        .then((res) => {
          this.status = res.data;
          console.log(this.status);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    async codeCreate(key) {
      this.timer = null;
      this.axios({
        url:
          "/login/qr/create?key=" +
          key +
          "&qrimg=true&timerstamp=" +
          Date.now(),
      })
        .then((res) => {
          console.log(res);
          this.qrCode = res.data.data.qrimg;
        })
        .catch((err) => {
          console.log(err);
        });
      this.timer = setInterval(async () => {
        const statusRes = await this.checkStatus(key);
        console.log(statusRes);
        if (statusRes.code === 800) {
          // 二维码已失效
          this.overdue = true;
          clearInterval(this.timer);
        }
        if (statusRes.code === 803) {
          // 这一步会返回cookies
          console.log("授权成功");
          await this.getLoginStatus();
          clearInterval(this.timer);
          this.$store.state.isLogin = true;
          this.closeLogin();
          this.$router.go(0);
        }
      }, 3000);
    },
    async login() {
      this.codeCode = 801;
      this.axios({
        url: "/login/qr/key?timerstamp=" + Date.now(),
      })
        .then((res) => {
          this.codeCreate(res.data.data.unikey);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    closeLogin() {
      this.$emit("closeLogin", false);
    },
  },
  created() {
    // console.log("created");
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  destroyed() {
    // this.timer = null;
    // console.log("destroy");
  },
};
</script>

<style>
.mod-login {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
}
.mod-login .msk {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
}
.mod-login-show {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 360px;
  width: 530px;
  background-color: var(--color-theme-light-5);
  border-radius: 10px;
  box-shadow: 0 0 10px 3px #999;
  overflow: hidden;
  z-index: 105;
}
.mod-login-hd {
  padding: 0 10px 0 20px;
  height: 40px;
  line-height: 40px;
  font-weight: 400;
  font-size: 20px;
  color: #f2f2f2;
  background-color: var(--color-theme);
}
.mod-login-hd .close {
  position: absolute;
  right: 5px;
  width: 30px;
  height: 30px;
  text-align: center;
  font-size: 0;
  cursor: pointer;
}
.mod-login-hd .close .iconfont {
  font-size: 16px;
}
/* mod-login-bd */
.mod-login-bd {
  position: relative;
  width: 100%;
  height: 320px;
}
/* login-code */
.mod-login-bd .login-code,
.mod-login-bd .login-phone,
.mod-login-bd .login-email {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.login-code .code-l {
  float: left;
  width: 50%;
  height: 260px;
  overflow: hidden;
}
.login-code .code-l img {
  margin-top: 20px;
  margin-left: 80px;
  height: 220px;
}
.login-code .code-r {
  float: right;
  padding-right: 80px;
  padding-top: 20px;
  width: 50%;
  height: 260px;
  overflow: hidden;
}
.login-code .code-r h4 {
  font-weight: 400;
  height: 30px;
  line-height: 30px;
  text-align: center;
}
.login-code .code-r .code-detail {
  position: relative;
  margin: 10px auto;
  width: 160px;
  height: 160px;
}
.login-code .code-r .code-detail img {
  width: 100%;
  height: 100%;
}
.login-code .code-r .code-detail .code-status {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
}
.login-code .code-r .code-detail .code-status p {
  margin-top: 40%;
  width: 100%;
  font-size: 14px;
  text-align: center;
}
.login-code .code-r .code-detail .code-status .btn-ref {
  display: block;
  margin: 10px auto;
}
.login-code .code-r .scan-tip {
  margin-top: 10px;
  width: 100%;
  font-size: 10px;
  color: #999;
  text-align: center;
}
.login-code .code-r .scan-tip em {
  font-style: normal;
  color: var(--color-theme);
}
.login-code .code-order {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  width: 140px;
  height: 28px;
  line-height: 28px;
  font-size: 14px;
  text-align: center;
  border: 1px solid #999;
  border-radius: 14px;
  cursor: pointer;
}
</style>